<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>删除节点</title>
</head>
<body>
<h3>删除节点</h3>
<p>
    若一个节点在页面中已不需要时，可以删除它
</p>
<p>
    在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除 <br>
    语法 <br>
    父元素.removeChild(要删除的元素)
</p>
<p>
    注： <br>
    如不存在父子关系则删除不成功 <br>
    删除节点和隐藏节点（display:none） 有区别的： 隐藏节点还是存在的，但是删除，则从html中删除节点 (真正意义的删除)
</p>
<hr>

<!--演示-->
<ul>
    <li>这个li,通过 节点 删除</li>
</ul>

<script>
    const 父元素_ul = document.querySelector('ul')
    // 删除节点  父元素.removeChild(子元素)
    父元素_ul.removeChild(父元素_ul.children[0]) // children返回的是数组,即使它只有一个元素 也要下标定位

    // 父元素_ul.children[0].remove() // 新写法,直接子元素删除. 弹幕里的 课程没有

</script>

</body>
</html>